import React, { useEffect, useMemo, useState } from 'react'
import { Tabs, Ellipsis } from 'antd-mobile'
import { useHistory } from 'react-router-dom'

export default function TopNav({ categoryList, newsList, getList }: any) {
    // 获取html存文本
    function extractText(html: any) {
        const div = document.createElement('div')
        div.innerHTML = html
        return div.innerText
    }

    const history = useHistory()
    function toDetail(id: string) {
        history.push(`/news/detail/${id}`)
    }

    return (
        <div>
            {categoryList.length > 0 &&
                <Tabs defaultActiveKey={categoryList[0]?.id.toString()} onChange={(key) => { getList({ type: key }) }}>
                    {categoryList.map((item: any) => {
                        return <Tabs.Tab title={item.name} key={item.id}>
                            <div className='newsList'>
                                {newsList.map((info: any) => {
                                    return <div className='newsItem' key={info.id} onClick={() => { toDetail(info.id) }}>
                                        <img className='newsItemImg' src={`http://124.93.196.45:10001/${info.cover}`} />
                                        <div className='right'>
                                            <h3 className='title'>
                                                <Ellipsis direction='end' content={info.title} />
                                            </h3>
                                            <div className='content'>
                                                <Ellipsis direction='end' rows={2} content={extractText(info.content)} />
                                            </div>
                                            <div className='num'>
                                                <span>评论总数：{info.commentNum}</span>
                                                <span>发布时间：{info.createTime}</span>
                                            </div>
                                        </div>
                                    </div>
                                })}
                            </div>
                        </Tabs.Tab>
                    })}
                </Tabs>
            }
        </div>
    )
}
